import { createContractPermission, createExplicitSession, useExplicitSessions, type Permission, type Session } from '@0xsequence/connect'
import { useEffect, useState } from 'react'
import { parseUnits } from 'viem'
function App() {
  const {
    isLoading,
    error,
    addExplicitSession,
    getExplicitSessions
  } = useExplicitSessions()
  const [sessions, setSessions] = useState<Session[]>([])
  // Load existing sessions
  useEffect(() => {
    const loadSessions = async () => {
      try {
        const existingSessions = await getExplicitSessions()
        setSessions(existingSessions)
      } catch (err) {
        console.error('Failed to load sessions:', err)
      }
    }
    loadSessions()
  }, [getExplicitSessions])
  // Function to handle modifying an existing explicit session
  const handleModifySession = () => {
    const newPermission = createContractPermission({
      address: '0x...',
      functionSignature: 'function testContract() public'
    })
    const currentSession = sessions[0];
    const modifiedSession = { ...currentSession, permissions: [...currentSession.permissions!, newPermission] }
    modifyExplicitSession(modifiedSession)
  }
  // Handle creating a new explicit session
  const handleCreateSession = async () => {
    try {
      const tokenSpendingSession = createExplicitSession({
        chainId: 42161,
        nativeTokenSpending: {
          valueLimit: 0n,
        },
        expiresIn: {
          days: 3
        },
        permissions: [
          createContractPermission({
            address: '0x...',
            functionSignature: 'function transfer(address to, uint256 amount)',
              rules: [
                {
                  param: 'amount',
                  type: 'uint256',
                  condition: 'LESS_THAN_OR_EQUAL',
                  value: parseUnits('100', 6), // Max cumulative amount of 100 USDC
                  cumulative: true
                }
              ]
          })
        ]
      })
      await addExplicitSession(42161, tokenSpendingSession)
      // Refresh sessions after creating a new one
      const updatedSessions = await getExplicitSessions()
      setSessions(updatedSessions)
    } catch (err) {
      console.error('Failed to create session:', err)
    }
  }
  if (isLoading) {
    return <div>Creating session...</div>
  }
  if (error) {
    return <div>Error: {error.message}</div>
  }
  return (
    <div>
      <h2>Explicit Sessions</h2>
      <button onClick={handleCreateSession}>
        Create New Session
      </button>
      <button onClick={handleModifySession}>
        Modify Session
      </button>
      <div>
        <h3>Existing Sessions ({sessions.length})</h3>
        {sessions.map((session, index) => (
          <div key={index}>
            <p>Session Address: {session.address}</p>
            <p>Chain ID: {session.chainId}</p>
            <p>Is Implicit: {session.isImplicit ? 'Yes' : 'No'}</p>
            <p>Permissions: {session.permissions?.permissions?.map((permission: Permission) => permission.target).join(', ')}</p>
          </div>
        ))}
      </div>
    </div>
  )
}